<template>
  <app-navigator defaultPath="normal/button">
    <div class="app-home">
      <header
        class="app-header"
        :style="{ height: HomeConfig.headSize + 'px' }"
      >
        <a href="javascript:void" class="site-name">XKCD-UI</a>
      </header>
      <aside
        class="app-aside"
        :style="{
          width: HomeConfig.menuSize + 'px',
          top: HomeConfig.headSize + 'px'
        }"
      >
        <app-menu />
      </aside>
      <main
        class="app-main"
        :style="{
          paddingTop: HomeConfig.headSize + 20 + 'px',
          paddingLeft: HomeConfig.menuSize + 20 + 'px'
        }"
      >
        <app-navigator-page />
      </main>
    </div>
  </app-navigator>
</template>

<script lang="ts">
import { AppNavigator } from "./components/navigator/app-navigator";
import { AppNavigatorPage } from "./components/navigator/app-navigator-page";
import AppMenu from "./components/app/app-menu.vue";

const HomeConfig = {
  headSize: 60,
  menuSize: 240
};
export default {
  name: "app",
  components: {
    AppMenu,
    AppNavigator,
    AppNavigatorPage
  },
  data() {
    return {
      HomeConfig
    };
  }
};
</script>

<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}

.app-home {
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1.5rem;
    line-height: 2.2rem;
    border-bottom: solid 1px #f2f2f2;
    background: #fff;
    .site-name {
      font-size: 1.3rem;
      font-weight: 600;
      color: #3eaf7c;
    }
  }

  .app-aside {
    position: fixed;
    left: 0;
    bottom: 0;
    border-right: solid 1px #f2f2f2;
    background-color: white;
  }

  .app-main {
    min-height: 100vh;
    box-sizing: border-box;
    .mr10{
      margin-right: 10px;
    }
  }
}
</style>
